<template>
    <el-container class="app-container" v-loading="loading">
        <el-header style="height: auto;">
            <h1 class="total">
                <span>
                  设备总量:{{count}}台
                </span>
                <span>
                  开机数量:{{open}}台
                </span>
                <span>
                  关机数量:{{down}}台
                </span>
            </h1>
        </el-header>
        <el-main>
            <div class="box-slide" @mouseover="stop" @mouseleave="start">

                <div class="slide-point">
                    <dl>
                        <dd v-for="(v,i) in pageCount" @click="slideGo(v)">
                            <i class="point" :class="pageIndex===v?'active':''"></i>
                        </dd>
                        <div class="timeline" :style="timeLineStyle()"></div>
                    </dl>
                </div>
                <div class="slide-btn slide-btn-left" @click="next"></div>
                <ul class="box-body" ref="list">
                    <template v-for="(item,index) in tableData">
                        <li class="box-item">
                            <div v-d3Scroll="d3Scrool" class="d3-scroll">
                                <ul class="cabinet-list">
                                    <template v-for="(d,i) in item">
                                        <li class="cabinet-item" :style="overlayStyle(i)">
                                            <div class="cabinet-body" @mouseover="over" @mouseleave="leave"
                                                 @click="handleDevice(d)">
                                                <p class="cabinet-title">
                                                    <span>机柜:{{d.rackNumber}}</span><span>所属:{{d.rackDept}}</span>

                                                </p>
                                                <ul class="device-list">
                                                    <li v-for="(dev,j) in machineList">
                                                        <div class="bracket">
                                                            <div class="device-bg"
                                                                 @click.stop="handleDeviceDetail(d.machineList[j])"
                                                                 v-if="d.machineList[j]">
                                                                <p>
                                                                    {{d.machineList[j].ip}}
                                                                </p>
                                                                <p>
                                                                    {{d.machineList[j].assetNumber}}
                                                                </p>
                                                                <i class="state"
                                                                   :class="overlayClass(d.machineList[j].state)"></i>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                    </template>
                                </ul>
                            </div>
                        </li>
                    </template>
                </ul>
                <div class="slide-btn slide-btn-right" @click="prev"></div>
            </div>
        </el-main>
        <el-dialog
                :visible.sync="dialogVisible"
                width="1200px"
                @open="() => {
                      $nextTick(() => {
                        $refs['config'].open &&
                          $refs['config'].open();
                      });
                    }"
                @closed="() => {
                          currentPage = 1;
                          loadData();
                        }"
                :close-on-click-modal="false"
                center>
            <List
                    ref="config"
                    :params="params"
                    @close="dialogClose"
                    :key="dialogVisible"
            ></List>
        </el-dialog>

        <el-dialog
                :visible.sync="devicedialogVisible"
                width="1200px"
                @open="() => {
                      $nextTick(() => {
                        $refs['detail'].open &&
                          $refs['detail'].open();
                      });
                      }"
                @closed="() => {
                          currentPage = 1;
                          loadData();
                        }"
                :close-on-click-modal="false"
                center>
            <Detail
                    ref="detail"
                    :params="device"
                    @close="detaildialogClose"
                    :key="devicedialogVisible"
            ></Detail>
        </el-dialog>
    </el-container>
</template>

<script>
import List from './list';
import Detail from './detail';

export default {
  components: {
    List, Detail
  },
  data() {
    return {
      timeout: 5,
      params: null,
      device: null,
      count: 0,
      open: 0,
      down: 0,
      num: 0,
      margin: 0,
      t: 0,
      l: 0,
      w: 0,
      direction: 1,
      pageIndex: 1,
      pageCount: 0,
      loading: true,
      dialogVisible: false,
      devicedialogVisible: false,
      tableData: [],
      machineList: [],
    };
  },

  methods: {
    timeLineStyle() {
      return {
        opacity: this.l,
        visibility: (this.l!==0?'visible':'hidden'),
        width: (this.l * 0.2 * 100) + '%'
      }
    },
    overlayStyle(index) {
      return {
        'clear': (index % this.num === 0) ? 'left' : '',
        // 'margin': '0 ' + this.margin + 'px',
        'width': this.w + 'px',
      };
    },
    d3Scrool(el) {
      this.$nextTick(() => {
        D3Scroll.D3Scroll(d3.select(el), {
          disable: false, step: '15%', style: {
            hover: {
              scrollbar: {
                'opacity': '1',
                'background': '#60b7d1'
              },
              scrollbarTrackPiece: {}
            },
            _static: {
              scrollbar: {
                'border-radius': '16px',
                'background': '#60b7d1'
              },
              scrollbarTrackPiece: {
                'background': 'transparent'
              }
            }

          },
        })
      })
    },
    start() {
      if (!this.dialogVisible&&!this.devicedialogVisible) {
        console.info('start')
        this.restart();
      }

    },
    stop() {
      console.info('stop')
      if (this.t) {
        this.t.stop();
      }
    },
    over(e) {
      e.currentTarget.classList.add('hover');

    },
    leave(e) {
      e.currentTarget.classList.remove('hover');

    },
    supportCss3(style) {
      var prefix = ['webkit', 'Moz', 'ms', 'o'],
        i,
        humpString = [],
        htmlStyle = document.documentElement.style,
        _toHumb = function(string) {
          return string.replace(/-(\w)/g, function($0, $1) {
            return $1.toUpperCase();
          });
        };
      for (i in prefix)
        humpString.push(_toHumb(prefix[i] + '-' + style));

      humpString.push(_toHumb(style));


      for (i in humpString)
        if (humpString[i] in htmlStyle) return true;


      return false;
    },
    slideGo(index) {
      this.l = 0;
      this.pageIndex=index;
      this.slideTo();
    },
    slideTo() {
      if (this.supportCss3('animation-play-state')) {
        this.$listDom.css({
          'transform': 'translateX(' + (-this.pw * (this.pageIndex - 1)) + 'px)'
        });

      } else {
        this.$listDom.stop(false, true).animate({
          'margin-left': (-this.pw * (this.pageIndex - 1)) + 'px'
        });
      }
    },
    next() {
      if (this.pageIndex < this.pageCount) {
        this.pageIndex++;
        this.slideTo();
      } else {
        this.pageIndex = this.pageCount;
        this.direction = 0;
        this.auto();
      }
    },
    prev() {
      if (this.pageIndex > 1) {
        this.pageIndex--;
        this.slideTo();
        // if (this.supportCss3('animation-play-state')) {
        //   if (!this.$listDom.is(':animated')) {
        //
        //     this.$listDom.css({
        //       'transform': 'translateX(' + (-this.pw * (this.pageIndex - 1)) + 'px)'
        //     });
        //     return false;
        //   }
        // } else {
        //   this.$listDom.stop(false, true).animate({
        //     'margin-left': (-this.pw * (this.pageIndex - 1)) + 'px'
        //   });
        // }
      } else {
        this.pageIndex = 1;
        this.direction = 1;
        this.auto();
      }
    },
    auto() {
      if (this.direction) {
        this.next();
      } else {
        this.prev();
      }
    },
    handleDeviceDetail(item) {
      if (item.id) {
        this.device = item;
        this.devicedialogVisible = true;
        this.stop();

        // this.devicedialogTitle = item.rackNumber + ':' + item.ip;
      } else {
        this.$message({
          message: '数据不存在，请刷新重试！',
          type: 'error'
        });
      }

    },
    detaildialogClose() {
      this.device = null;
      this.devicedialogVisible = false;
      this.devicedialogTitle = '';
    },
    // 0:开机，1:关机；2：未关机报警错误状态
    overlayClass(state) {
      let cls = '';
      switch (state) {
      case 0:

        break
      case 1:
        cls = 'off'
        break;

      case 2:
        cls = 'error state-twinkle'
        break;
      }
      return cls;
    },

    dialogClose() {
      this.dialogVisible = false;
      this.params = null;
    },
    handleDevice(p) {
      this.dialogVisible = true;
      this.params = p;
      this.stop();
    },
    arrayGroup(array, subGroupLength) {
      var index = 0;
      var newArray = [];
      while (index < array.length) {
        newArray.push(array.slice(index, index += subGroupLength));
      }
      return newArray;
    },
    loadData() {
      this.machineList = [];
      for (let i = 0; i < 17; i++) {
        this.machineList.push({
          ip: i + ''
        });
      }
      this.$axiosInstance({
        method: 'get',
        url: '/getCabinetList.json',
        params: {
          ...this.queryform,
        },
      })
        .then((res) => {
          let { code, data } = res.data;
          if (code === 200) {
            this.tableData = this.arrayGroup(data.list, this.num);
            this.pageCount = this.tableData.length;
            this.count = data.machineTotal;
            this.open = data.onTotal;
            this.down = data.offTotal;
            // this.currentPage = res.data.data.pageNo
            // this.pageSize = res.data.data.pageSize
          }
          this.loading = false;
          this.restart();
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    layoutCabint() {
      if (this.$refs['list'].getBoundingClientRect) {
        this.$listDom = $(this.$refs['list']);
        this.pw = this.$refs['list'].getBoundingClientRect().width;
        let w = 210;
        this.num = Math.floor(this.pw / w) - 1;
        this.w = (100 / this.num) / 100 * (this.pw - 45);
        this.margin = Math.floor((this.pw - (w * this.num)) / (this.num + 1) / 2);
      }
    },
    restart() {
      if (this.t) {
        this.t.stop();
      }
      this.t = d3.interval(() => {
        if (this.l >= this.timeout) {
          this.loadData();
          this.auto();
          this.l = 0;
        } else {
          this.l++;
        }
      }, 1000);
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.onresize = () => {
        this.layoutCabint();
        this.restart();
      };
      this.loadData();
      this.layoutCabint();
    });
  },
  destroyed() {
    if (this.t) {
      this.t.stop();
    }
  }
};
</script>

<style lang="less" scoped>
    .box-slide {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        cursor: progress;

        .slide-point{
            text-align: center;
            dl {
                position: relative;
                width: auto;
                display: inline-block;
                dd{
                    display: inline-block;
                    margin: 0 10px;
                }
            }
            .point{
                background-color: #67e3fa;
                height: 10px;
                width: 10px;
                display: block;
                border-radius: 50%;
                opacity: 0.4;
                cursor: pointer;
                &:hover{
                    opacity: 1;
                }
            }
            .active{
                opacity: 0.8;
                background-color: #67C23A;
            }
        }

        .timeline {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            background-color: #67e3fa;
            transition: 1s;
            opacity: 0;
            visibility: hidden;
        }

        .box-body {
            height: 100%;
            margin: 0;
            list-style: none;
            padding: 0;
            white-space: nowrap;
            transform: translateX(0px);
            transition: 0.5s;
        }

        .box-item {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            white-space: nowrap;
            display: inline-block;
        }

        .slide-btn {
            background-position: 50%;
            background-size: 100%;
            background-repeat: no-repeat;
            cursor: pointer;
            position: absolute;
            width: 25px;
            height: 100%;
            z-index: 999;
            top: 0;
        }

        .slide-btn-left {
            background-image: url("~@/assets/box/thryLeft.png");
            left: 0;
            background-position: 50%;

            &:hover {
                background-image: url("~@/assets/box/thryLeft0.png");
            }
        }

        .slide-btn-right {
            right: 0;
            background-image: url("~@/assets/box/thryRight.png");
            background-position: 50%;

            &:hover {
                background-image: url("~@/assets/box/thryRight0.png");
            }
        }
    }

    .total {
        padding: 5px 30px;
        font-size: 25px;
        font-weight: 800;

        span {
            margin: 0 15px;
        }
    }

    .cabinet-list {
        width: 100%;
        padding: 0 10px;
        margin: 0;
        padding-left: 20px;
        font-size: 0;
        list-style: none;
        user-select: none;
        display: inline-block;

        .separate {
            float: left;
            width: 100%;
            height: 1px;
            margin-bottom: 15px;
            background: #CCCCCC;
        }

        .cabinet-item {
            min-width: 210px;
            float: left;

            .hover {
                box-shadow: 0 0 14px #9c9c9c;
            }

            .cabinet-body {
                width: 210px;
                padding: 0 5px;
                margin: 25px auto;
                border: 1px solid #666666;
                cursor: pointer;
                border-radius: 15px;
            }

            .cabinet-title {
                width: 100%;
                padding: 15px 0;
                border-bottom: 1px solid #ccc;
                display: flex;
                flex-direction: row;
                justify-content: space-around;

                span {
                    font-weight: 700;
                    font-style: normal;
                    font-size: 14px;
                }
            }

            text-align: center;

            .device-list {
                width: 100%;
                padding: 0 10px;
                margin: 15px 0;
                font-size: 0;
                min-height: 50px;
                list-style: none;

                .bracket {
                    width: 100%;
                    border: 1px solid #cccccc;
                    position: relative;
                    perspective: 1000px;
                    height: 50px;
                    padding: 0 5px;
                    z-index: 1;
                    transition: .3s;
                }

                &:hover {
                    li {
                        opacity: 0.5;
                    }
                }

                .device-bg {
                    height: 100%;
                    width: 100%;
                    transform-style: preserve-3d;
                    background-image: url("~@/assets/device.png");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    transition: .3s;
                    padding: 6px;

                    p {
                        font-size: 12px;
                        color: #FFFFFF;
                    }
                }

                .error {
                    background-image: url("~@/assets/error.png");
                    background-size: 100%;
                    background-repeat: no-repeat;
                    height: 10px;
                    width: 10px;
                    position: absolute;
                    display: block;
                    border-radius: 10px;
                    right: 15px;
                    top: 15px;
                }

                .runing {
                    background-image: url("~@/assets/runing.png");
                    background-size: 100%;
                    background-repeat: no-repeat;
                    height: 10px;
                    width: 10px;
                    position: absolute;
                    display: block;
                    border-radius: 10px;
                    right: 15px;
                    top: 15px;
                }

                .off {
                    background-image: url("~@/assets/off.png");
                    background-size: 100%;
                    background-repeat: no-repeat;
                    height: 10px;
                    width: 10px;
                    position: absolute;
                    display: block;
                    border-radius: 10px;
                    right: 15px;
                    top: 15px;
                }

                li {
                    margin: 10px 0;

                    &:hover {
                        z-index: 999;
                        opacity: 1;

                        .device-bg {
                            transform: translate3d(0px, 5px, 350px);
                        }

                    }

                    .status {
                        display: block;
                        width: 25px;
                        height: 25px;
                        border-radius: 50%;
                        margin: 6px;
                        border: 2px solid #7a7e74;
                    }
                }

            }
        }
    }
</style>
